import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface UIState {
  sidebarCollapsed: boolean;
  theme: 'light' | 'dark';
  loading: {
    global: boolean;
    [key: string]: boolean;
  };
  notifications: {
    id: string;
    type: 'success' | 'error' | 'warning' | 'info';
    title: string;
    message: string;
    duration?: number;
    timestamp: number;
  }[];
  modals: {
    [key: string]: {
      visible: boolean;
      data?: any;
    };
  };
  breadcrumbs: {
    title: string;
    path?: string;
  }[];
  pageTitle: string;
}

const initialState: UIState = {
  sidebarCollapsed: false,
  theme: 'light',
  loading: {
    global: false,
  },
  notifications: [],
  modals: {},
  breadcrumbs: [],
  pageTitle: '测试DEMO',
};

const uiSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    // 侧边栏控制
    toggleSidebar: (state) => {
      state.sidebarCollapsed = !state.sidebarCollapsed;
    },
    setSidebarCollapsed: (state, action: PayloadAction<boolean>) => {
      state.sidebarCollapsed = action.payload;
    },

    // 主题控制
    setTheme: (state, action: PayloadAction<'light' | 'dark'>) => {
      state.theme = action.payload;
    },
    toggleTheme: (state) => {
      state.theme = state.theme === 'light' ? 'dark' : 'light';
    },

    // 加载状态控制
    setGlobalLoading: (state, action: PayloadAction<boolean>) => {
      state.loading.global = action.payload;
    },
    setLoading: (state, action: PayloadAction<{ key: string; loading: boolean }>) => {
      state.loading[action.payload.key] = action.payload.loading;
    },
    clearLoading: (state, action: PayloadAction<string>) => {
      delete state.loading[action.payload];
    },

    // 通知管理
    addNotification: (state, action: PayloadAction<{
      type: 'success' | 'error' | 'warning' | 'info';
      title: string;
      message: string;
      duration?: number;
    }>) => {
      const notification = {
        id: Date.now().toString(),
        ...action.payload,
        timestamp: Date.now(),
      };
      state.notifications.push(notification);
    },
    removeNotification: (state, action: PayloadAction<string>) => {
      state.notifications = state.notifications.filter(
        notification => notification.id !== action.payload
      );
    },
    clearNotifications: (state) => {
      state.notifications = [];
    },

    // 模态框管理
    showModal: (state, action: PayloadAction<{ key: string; data?: any }>) => {
      state.modals[action.payload.key] = {
        visible: true,
        data: action.payload.data,
      };
    },
    hideModal: (state, action: PayloadAction<string>) => {
      if (state.modals[action.payload]) {
        state.modals[action.payload].visible = false;
      }
    },
    setModalData: (state, action: PayloadAction<{ key: string; data: any }>) => {
      if (state.modals[action.payload.key]) {
        state.modals[action.payload.key].data = action.payload.data;
      }
    },

    // 面包屑导航
    setBreadcrumbs: (state, action: PayloadAction<{
      title: string;
      path?: string;
    }[]>) => {
      state.breadcrumbs = action.payload;
    },
    addBreadcrumb: (state, action: PayloadAction<{
      title: string;
      path?: string;
    }>) => {
      state.breadcrumbs.push(action.payload);
    },
    clearBreadcrumbs: (state) => {
      state.breadcrumbs = [];
    },

    // 页面标题
    setPageTitle: (state, action: PayloadAction<string>) => {
      state.pageTitle = action.payload;
      // 同时更新浏览器标题
      if (typeof document !== 'undefined') {
        document.title = `${action.payload} - 测试DEMO`;
      }
    },
  },
});

export const {
  toggleSidebar,
  setSidebarCollapsed,
  setTheme,
  toggleTheme,
  setGlobalLoading,
  setLoading,
  clearLoading,
  addNotification,
  removeNotification,
  clearNotifications,
  showModal,
  hideModal,
  setModalData,
  setBreadcrumbs,
  addBreadcrumb,
  clearBreadcrumbs,
  setPageTitle,
} = uiSlice.actions;

export default uiSlice.reducer;